

<template>
<div>
  <h2>{{ state.msg }}</h2>
  <h2>{{ state.data.name }} -- {{ firstName }}</h2>
  <button @click="changeName">修改</button>
</div>
</template>
<script>
import { computed } from 'vue';
import { reactive } from './reactivity/reactive'

export default {
  setup() {
    const state = reactive({
      msg: 'hello',
      data: {
        name: '胡总'
      }
    })
    
    const changeName = () => {
      // state.msg = 'world'
      state.data.name = '牛马先生'
    }

    const firstName = computed(() => {
      return state.data.name[0]
    })
    
    
    return {state, changeName, firstName}
  }
}
</script>
<style lang="css" scoped>

</style>
